<template>
	<div class="module">
		<div class="bigImage-view">
			<!-- <img :src="imgUrl" alt="" @click="clickBigImg"> -->
			<Carousel 
				v-model="data.data.index" 
				:autoplay="setting.autoplay"
				:autoplay-speed="setting.autoplaySpeed"
				:dots="setting.dots"
				:radius-dot="setting.radiusDot"
				:trigger="setting.trigger"
				:arrow="setting.arrow"
				@on-change="changeItem">
				<CarouselItem v-for="(item, index) in data.data.smallList" :key="index">
					<img :src="item" @click="clickBigImg">
				</CarouselItem>
			</Carousel>
		</div>
		<div class="smallImage-view">
			<div class="img">
				<img 
					:src="item" 
					@click="changeImg(index)" 
					v-for="(item, index) in data.data.smallList" 
					:class="{ 'active': data.data.index === index }">
			</div>
		</div>
	</div>
</template>

<script>
export default {
	props: ['data'],
	data() {
		return {
			imgUrl: 0,
			setting: {
				autoplay: true,
				autoplaySpeed: 3000,
				dots: 'inside',
				radiusDot: true,
				trigger: 'click',
				arrow: 'always'
			}
		}
	},
	methods: {
		changeItem(oldValue, value) {
			this.data.data.index = value;
		},
		changeImg(index) {
			this.data.data.index = index;
		},
		clickBigImg() {
			this.setting.autoplay = false;
			this.$emit('on-click')
		}
	}
}
</script>

<style scoped lang="less">
.module {
	width: 100%;
	.bigImage-view {
		width: 100%;
		margin-bottom: .1rem;
		img {
			width: 100%;
			height: 100%;
		}
	}
	.smallImage-view {
		.img {
			img {
				width: .7rem;
				height: .7rem;
				margin-right: .1rem;
			}
		}
	}
	.active {
		border: 1px solid #FFF;
	}
}
</style>